<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="author" content="Darko Bunic"/>
		<meta name="description" content="Drag and drop table content with JavaScript"/>
		<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<script type="text/javascript" src="../header.js"></script>
		<script type="text/javascript" src="../redips-drag-min.js"></script>
		<script type="text/javascript" src="script.js"></script>
		<title>Example 9: Single and shift mode</title>
	</head>
	<body>
		<br/>
		<br/>
		<div id="main_container">
			<!-- tables inside this DIV could have draggable content -->
			<div id="drag">
	
				<!-- left container -->
				<div id="left">
					<table id="table1">
						<colgroup>
							<col width="250"/>
						</colgroup>
						<tbody>
							<tr><td></td></tr>
							<tr><td></td></tr>
							<tr><td></td></tr>
							<tr><td></td></tr>
							<tr><td></td></tr>
							<tr><td></td></tr>
						</tbody>
					</table>
				</div><!-- left container -->
				
				<!-- right container -->
				<div id="right">
					<table id="table2">
						<colgroup>
							<col width="120"/>
						</colgroup>
						<tbody>
							<!-- clone 2 elements + last element -->
							<tr><td class="mark"><div id="c" class="drag green">3</div></td></tr>
							<tr><td class="mark"><div id="b" class="drag orange">2</div></td></tr>
							<tr><td class="mark"><div id="f" class="drag orange">6</div></td></tr>
							<tr><td class="mark"><div id="a" class="drag orange">1</div></td></tr>
							<tr><td class="mark"><div id="d" class="drag green">4</div></td></tr>
							<tr><td class="mark"><div id="e" class="drag green">5</div></td></tr>
						</tbody>
					</table>
				</div><!-- right container -->
			</div><!-- drag container -->
			<div id="message">
				Sort elements from right table
				<br/><br/>
				Double click will return element to initial position
				<br/><br/>
				<!-- animation checkbox -->
				<input type="checkbox" class="checkbox" onclick="toggle_animation(this)" title="Enable / disable animation" checked=""/><span>Animation</span>
			</div>
		</div><!-- main container -->
	</body>
</html>